<template>
    <div class="common-tab-content">
        <div class="gkhh-list">
            <div class="gkhh-item" @click="gkhhFn(item,i)" v-for="(item, i) in gkhhList" :key="i">
                <img :src="item.icon" />
                <div class="gkhh-tt">{{ item.title }}</div>
            </div>
        </div>
        <el-dialog v-model="visible" width="500">
            <template #header>
                <div class="common-title">
                    <h4 class="title-class">
                        <el-icon class="el-icon--left">
                            <Edit/>
                        </el-icon>
                        <span>栏目修改</span>
                    </h4>
                </div>
            </template>
            <div class="common-dialog-wrap">
                <el-form ref="commonForm" :model="addObj" class="common-form" label-position="top">
                    <el-form-item label="名称">
                        <el-input v-model="addObj.title"></el-input>
                    </el-form-item>
                    <el-form-item label="缩写">
                        <el-input v-model="addObj.sx"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="addObj.sort"></el-input>
                    </el-form-item>
                    <el-form-item label="外链">
                        <el-input v-model="addObj.src"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeAdd">取消</el-button>
                    <el-button type="primary" @click="enterAdd">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue"
import hhbt1_1 from "@/assets/img/d/hhbt1_1.png"
import gkhh_1 from "@/assets/img/d/gkhh_1.png"
import gkhh_2 from "@/assets/img/d/gkhh_2.png"
import gkhh_3 from "@/assets/img/d/gkhh_3.png"
import gkhh_4 from "@/assets/img/d/gkhh_4.png"
import gkhh_5 from "@/assets/img/d/gkhh_5.png"
import gkhh_6 from "@/assets/img/d/gkhh_6.png"
import gkhh_7 from "@/assets/img/d/gkhh_7.png"
import gkhh_8 from "@/assets/img/d/gkhh_8.png"
import gkhh_9 from "@/assets/img/d/gkhh_9.png"
import gkhh_10 from "@/assets/img/d/gkhh_10.png"
import gkhh_11 from "@/assets/img/d/gkhh_11.png"
import {Edit} from "@element-plus/icons-vue";
import {$msg} from "@/utils";
const gkhhList = ref([
    {title: '新媒体矩阵', icon: gkhh_10,sx: 'xmtjz',src: 'https://zxh.e21.cn/'},
    {title: '高招咨询会', icon: gkhh_1,sx: 'gzzxh', src: 'https://zxh.e21.cn/'},
    {title: '特殊类型招生', icon: gkhh_2, sx:'tslxzs', src: 'https://gaokao.chsi.com.cn/gkzt/tszs'},
    {title: '志愿填报参考', icon: gkhh_3, sx:'zytbck', src: '/ComprehensiveQuery'},
    {title: '专业目录', icon: gkhh_4, sx:'zyml', src: 'https://zyyxzy.moe.edu.cn/home/major-register'},
    {title: '志愿填报须知', icon: gkhh_6,sx: 'zytbxz', src: 'https://zyyxzy.moe.edu.cn/home/major-register'},
    {title: '职业就业指导', icon: gkhh_7, sx:'zyjyzd', src: 'https://xz.chsi.com.cn/home.action'},
    {title: '志愿填报指导', icon: gkhh_8, sx:'zytbzd', src: '/MsgDetails'},
    {title: '智能问答', icon: gkhh_9, sx:'znwd', src: '/ProvinceDialogue'},
    {title: '使用指南', icon: gkhh_10, sx:'syzn', src: 'https://zsxxw.e21.cn/zhuanti/syzn/'},
    {title: '教育部阳光志愿', icon: gkhh_11, sx:'jybygzy', src: 'https://gaokao.chsi.com.cn/zyck/'},
])
const visible = ref(false)
const addObj = reactive({
    title: '',
    sx: '',
    sort: '',
    src: ''
})
const gkhhFn = (item,i) => {
    Object.assign(addObj, {
        ...item,
        sort: i.toString()
    })
    visible.value = true
}
const closeAdd = () => {
    visible.value = false
}
const enterAdd = () => {
    visible.value = false
    $msg({type: 'success', message: '修改成功'})
}
</script>
<style scoped lang="less">
.gkhh-list {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 40px 16px;
    .gkhh-item {
        height: 4.5rem;
        text-align: center;
        cursor: pointer;

        img {
            height: 2.5rem;
            width: 2.5rem;
            margin-bottom: 1.25rem;
        }

        .gkhh-tt {
            font-size: .875rem;
            font-weight: bold;
            color: #333333;
            text-align: center;
            margin-top: .125rem;
        }
    }
}
</style>